<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./lib/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px; height: 400px"></div>
        <script>
            const myChart = echarts.init(document.querySelector("#main"));
            const option = {
                backgroundColor: "rgb(40,46,72)",
                title: {
                    text: "月销量",
                    textStyle: {
                        color: "#fff",
                        fontSize: 30,
                    },
                    left: "center",
                    top: "top",
                },
                grid: {
                    left: "10%",
                    right: "10%",
                    top: "30%",
                    bottom: "10%",
                    containLable: true,
                },
                tooltip: {},
                xAxis: {
                    type: "category",
                    // 坐标线
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#42A4FF",
                        },
                    },
                    // 坐标刻度
                    axisTick: {
                        show: false,
                    },
                    // 坐标文字
                    axisLabel: {
                        color: "#fff",
                    },
                    data: [
                        "一月",
                        "二月",
                        "三月",
                        "四月",
                        "五月",
                        "六月",
                        "七月",
                    ],
                },
                yAxis: {
                    name: "个",
                    nameTextStytle: {
                        color: "#fff",
                        fontSize: 13,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#42A4FF",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#fff",
                        formatter: "￥{value}",
                    },
                    // 坐标分割线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#42A4FF",
                        },
                    },
                },
                series: [
                    {
                        name: "销量",
                        type: "bar",
                        // 柱体宽度
                        barWidth: 17,
                        itemStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "red", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "blue", // 100% 处的颜色
                                    },
                                ],
                            },
                        },
                        data: [500, 2000, 3600, 1000, 1000, 2000, 4000],
                    },
                ],
            };
            myChart.setOption(option);
        </script>
    </body>
</html>
